<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>MoGo PSD</title>
  </head>

  <body>
    <div class="main">
      <header class="header">
        <article>
          <div class="header-header">
            <img
              src="assets/img/header-logo.png"
              class="header-header-logo"
              alt="logo"
            />
            <nav class="header-header-menu">
              <ul class="header-header-menu-list">
                <li class="header-header-menu-list-item">
                  <a href="#" class="header-header-menu-list-item-link"
                    >about</a
                  >
                </li>
                <li class="header-header-menu-list-item">
                  <a href="#" class="header-header-menu-list-item-link"
                    >service</a
                  >
                </li>
                <li class="header-header-menu-list-item">
                  <a href="#" class="header-header-menu-list-item-link">work</a>
                </li>
                <li class="header-header-menu-list-item">
                  <a href="#" class="header-header-menu-list-item-link">blog</a>
                </li>
                <li class="header-header-menu-list-item">
                  <a href="#" class="header-header-menu-list-item-link"
                    >contact</a
                  >
                </li>
                <li class="header-header-menu-list-item">
                  <a href="#" class="header-header-menu-list-item-link"
                    ><i class="header-sprite header-sprite-shopping-cart"></i
                  ></a>
                </li>
                <li class="header-header-menu-list-item">
                  <a href="#" class="header-header-menu-list-item-link"
                    ><i class="header-sprite header-sprite-magnifying-glass"></i
                  ></a>
                </li>
              </ul>
            </nav>
          </div>
          <h1 class="header-title">Creative Template</h1>
          <h2 class="header-caption">Welcome to MoGo</h2>
          <div class="header-learn-more">
            <a href="#" class="header-learn-more-link">Learn more</a>
          </div>
          <div class="header-slider">
            <a href="#" class="header-slider-item">
              <p class="header-slider-item-cat">01 <strong>intro</strong></p>
            </a>
            <a href="#" class="header-slider-item">
              <p class="header-slider-item-cat">02 <strong>work</strong></p>
            </a>
            <a href="#" class="header-slider-item">
              <p class="header-slider-item-cat">03 <strong>about</strong></p>
            </a>
            <a href="#" class="header-slider-item">
              <p class="header-slider-item-cat">04 <strong>contacts</strong></p>
            </a>
          </div>
        </article>
      </header>

      <section class="about-us">
        <h3 class="about-us-sub-caption">What we do</h3>
        <article>
          <h2 class="about-us-caption">Story about us</h2>
          <p class="about-us-text">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
            aliquip ex ea commodo consequat.
          </p>
          <div class="about-us-project-list">
            <img
              src="assets/img/about-us-imac.jpg"
              class="about-us-project-list-item"
              alt="iMac"
            />
            <img
              src="assets/img/about-us-iphone.jpg"
              class="about-us-project-list-item"
              alt="iPhone"
            />
            <img
              src="assets/img/about-us-macbook.jpg"
              class="about-us-project-list-item"
              alt="macBook"
            />
          </div>
          <ol class="about-us-facts">
            <li class="about-us-facts-item">
              <h3 class="about-us-facts-item-caption">42</h3>
              <h4 class="about-us-facts-item-sub-caption">
                Web Design Projects
              </h4>
            </li>
            <li class="about-us-facts-item">
              <h3 class="about-us-facts-item-caption">123</h3>
              <h4 class="about-us-facts-item-sub-caption">happy client</h4>
            </li>
            <li class="about-us-facts-item">
              <h3 class="about-us-facts-item-caption">15</h3>
              <h4 class="about-us-facts-item-sub-caption">award winner</h4>
            </li>
            <li class="about-us-facts-item">
              <h3 class="about-us-facts-item-caption">99</h3>
              <h4 class="about-us-facts-item-sub-caption">cup of coffe</h4>
            </li>
            <li class="about-us-facts-item">
              <h3 class="about-us-facts-item-caption">24</h3>
              <h4 class="about-us-facts-item-sub-caption">members</h4>
            </li>
          </ol>
        </article>
      </section>

      <section class="amazing-services">
        <h3 class="amazing-services-sub-caption">We work with</h3>
        <article>
          <h2 class="amazing-services-caption">Amazing services</h2>
          <ol class="amazing-services-advantages-row">
            <li class="amazing-services-advantages-row-item">
              <i
                class="amazing-services-sprite amazing-services-sprite-alarm"
              ></i>
              <header class="amazing-services-advantages-row-item-header">
                <h4 class="amazing-services-adventages-row-item-header-title">
                  Photography
                </h4>
                <p
                  class="amazing-services-adventages-row-item-header-sub-title"
                >
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
                  do eiusmod tempor.
                </p>
              </header>
            </li>
            <li class="amazing-services-advantages-row-item">
              <i
                class="amazing-services-sprite amazing-services-sprite-web-design"
              ></i>
              <header class="amazing-services-advantages-row-item-header">
                <h4 class="amazing-services-adventages-row-item-header-title">
                  Web Design
                </h4>
                <p
                  class="amazing-services-adventages-row-item-header-sub-title"
                >
                  Ipsum dolor sit amet, consectetur adipiscing elit, sed do
                  eiusmod tempor.
                </p>
              </header>
            </li>
            <li class="amazing-services-advantages-row-item">
              <i
                class="amazing-services-sprite amazing-services-sprite-computer"
              ></i>
              <header class="amazing-services-advantages-row-item-header">
                <h4 class="amazing-services-adventages-row-item-header-title">
                  Creativity
                </h4>
                <p
                  class="amazing-services-adventages-row-item-header-sub-title"
                >
                  Dolor sit amet, consectetur adipiscing elit, sed do eiusmod
                  tempor.
                </p>
              </header>
            </li>
          </ol>
          <ol class="amazing-services-advantages-row">
            <li class="amazing-services-advantages-row-item">
              <i
                class="amazing-services-sprite amazing-services-sprite-book"
              ></i>
              <header class="amazing-services-advantages-row-item-header">
                <h4 class="amazing-services-adventages-row-item-header-title">
                  seo
                </h4>
                <p
                  class="amazing-services-adventages-row-item-header-sub-title"
                >
                  Ipsum dolor sit amet, consectetur adipiscing elit, sed do
                  eiusmod.
                </p>
              </header>
            </li>
            <li class="amazing-services-advantages-row-item">
              <i
                class="amazing-services-sprite amazing-services-sprite-home"
              ></i>
              <header class="amazing-services-advantages-row-item-header">
                <h4 class="amazing-services-adventages-row-item-header-title">
                  Css/Html
                </h4>
                <p
                  class="amazing-services-adventages-row-item-header-sub-title"
                >
                  Lorem dolor sit amet, consectetur adipiscing elit, sed do
                  tempor.
                </p>
              </header>
            </li>
            <li class="amazing-services-advantages-row-item">
              <i
                class="amazing-services-sprite amazing-services-sprite-image"
              ></i>
              <header class="amazing-services-advantages-row-item-header">
                <h4 class="amazing-services-adventages-row-item-header-title">
                  digital
                </h4>
                <p
                  class="amazing-services-adventages-row-item-header-sub-title"
                >
                  Sit amet, consectetur adipiscing elit, sed do eiusmod tempor.
                </p>
              </header>
            </li>
          </ol>
        </article>
      </section>

      <footer class="footer">
        <article>
          <div class="footer-mogo">
            <h3 class="footer-mogo-caption">MoGo</h3>
            <p class="footer-mogo-text">
              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
              eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
              enim ad minim veniam, quis nostrud exercitation ullamco laboris
              nisi ut aliquip ex ea commodo consequat.
            </p>
            <p class="footer-mogo-followers-counter">
              <strong>15k</strong> followers
            </p>
            <div class="footer-mogo-follow-us">
              <p class="footer-mogo-follow-us-text">Follow Us:</p>
              <ol class="footer-mogo-follow-us-list">
                <li class="footer-mogo-follow-us-list-item">
                  <a href="#" class="footer-sprite footer-sprite-facebook"></a>
                </li>

                <li class="footer-mogo-follow-us-list-item">
                  <a href="#" class="footer-sprite footer-sprite-twitter"></a>
                </li>

                <li class="footer-mogo-follow-us-list-item">
                  <a href="#" class="footer-sprite footer-sprite-instagram"></a>
                </li>

                <li class="footer-mogo-follow-us-list-item">
                  <a href="#" class="footer-sprite footer-sprite-pinterest"></a>
                </li>

                <li class="footer-mogo-follow-us-list-item">
                  <a
                    href="#"
                    class="footer-sprite footer-sprite-google-plus"
                  ></a>
                </li>

                <li class="footer-mogo-follow-us-list-item">
                  <a href="#" class="footer-sprite footer-sprite-youtube"></a>
                </li>

                <li class="footer-mogo-follow-us-list-item">
                  <a href="#" class="footer-sprite footer-sprite-dribbble"></a>
                </li>

                <li class="footer-mogo-follow-us-list-item">
                  <a href="#" class="footer-sprite footer-sprite-tumblr"></a>
                </li>
              </ol>
            </div>
            <form class="footer-mogo-form">
              <input
                type="email"
                name="email"
                class="footer-mogo-form-email"
                placeholder="Your Email..."
                required
              />
              <input
                type="submit"
                name="submit"
                class="footer-mogo-form-submit"
                value="subscribe"
              />
            </form>
          </div>

          <div class="footer-blogs">
            <h3 class="footer-blogs-caption">Blogs</h3>
            <ol class="footer-blogs-list">
              <li class="footer-blogs-list-item">
                <img
                  src="assets/img/footer-blogs-chandelier.jpg"
                  class="footer-blogs-list-item-img"
                  alt="chandelier"
                />
                <div class="footer-blogs-list-item-header">
                  <h3 class="footer-blogs-list-item-header-caption">
                    <a
                      href="#"
                      class="footer-blogs-list-item-header-caption-link"
                      >Lorem ipsum dolor sit amet, consectetur adipiscing</a
                    >
                  </h3>
                  <h4 class="footer-blogs-list-item-header-date">
                    Jan 9, 2016
                  </h4>
                </div>
              </li>
              <li class="footer-blogs-list-item">
                <img
                  src="assets/img/footer-blogs-firework.jpg"
                  class="footer-blogs-list-item-img"
                  alt="firework"
                />
                <div class="footer-blogs-list-item-header">
                  <h3 class="footer-blogs-list-item-header-caption">
                    <a
                      href="#"
                      class="footer-blogs-list-item-header-caption-link"
                      >Consectetur adipiscing elit, sed do eiusmod tempor</a
                    >
                  </h3>
                  <h4 class="footer-blogs-list-item-header-date">
                    Jan 9, 2016
                  </h4>
                </div>
              </li>
              <li class="footer-blogs-list-item">
                <img
                  src="assets/img/footer-blogs-guitar.jpg"
                  class="footer-blogs-list-item-img"
                  alt="guitar"
                />
                <div class="footer-blogs-list-item-header">
                  <h3 class="footer-blogs-list-item-header-caption">
                    <a
                      href="#"
                      class="footer-blogs-list-item-header-caption-link"
                      >sed do eiusmod tempor incididunt ut labore</a
                    >
                  </h3>
                  <h4 class="footer-blogs-list-item-header-date">
                    Jan 9, 2016
                  </h4>
                </div>
              </li>
            </ol>
          </div>

          <div class="footer-instagram">
            <h3 class="footer-instagram-caption">instagram</h3>
            <ol class="footer-instagram-row">
              <li class="footer-instagram-row-item">
                <img
                  src="assets/img/footer-instagram-5.jpg"
                  class="footer-instagram-row-item-img"
                  alt="instagram"
                />
              </li>
              <li class="footer-instagram-row-item">
                <img
                  src="assets/img/footer-instagram-4.jpg"
                  class="footer-instagram-row-item-img"
                  alt="instagram"
                />
              </li>
              <li class="footer-instagram-row-item">
                <img
                  src="assets/img/footer-instagram-3.jpg"
                  class="footer-instagram-row-item-img"
                  alt="instagram"
                />
              </li>
            </ol>

            <ol class="footer-instagram-row">
              <li class="footer-instagram-row-item">
                <img
                  src="assets/img/footer-instagram-8.jpg"
                  class="footer-instagram-row-item-img"
                  alt="instagram"
                />
              </li>
              <li class="footer-instagram-row-item">
                <img
                  src="assets/img/footer-instagram-9.jpg"
                  class="footer-instagram-row-item-img"
                  alt="instagram"
                />
              </li>
              <li class="footer-instagram-row-item">
                <img
                  src="assets/img/footer-instagram-7.jpg"
                  class="footer-instagram-row-item-img"
                  alt="instagram"
                />
              </li>
            </ol>

            <ol class="footer-instagram-row">
              <li class="footer-instagram-row-item">
                <img
                  src="assets/img/footer-instagram-1.jpg"
                  class="footer-instagram-row-item-img"
                  alt="instagram"
                />
              </li>
              <li class="footer-instagram-row-item">
                <img
                  src="assets/img/footer-instagram-2.jpg"
                  class="footer-instagram-row-item-img"
                  alt="instagram"
                />
              </li>
              <li class="footer-instagram-row-item">
                <img
                  src="assets/img/footer-instagram-6.jpg"
                  class="footer-instagram-row-item-img"
                  alt="instagram"
                />
              </li>
            </ol>
            <h3 class="footer-instagram-view-more">
              <a href="#" class="footer-instagram-view-more-link"
                >View more photos</a
              >
            </h3>
          </div>

          <div class="footer-copyright">
            <p class="footer-copyright-text">
              © 2016 MoGo free PSD template by <strong>Laaqiq</strong>
            </p>
          </div>
        </article>
      </footer>
    </div>
    <link rel="stylesheet" type="text/css" href="assets/css/includes.css" />
    <link
      href="https://fonts.googleapis.com/css?family=Kaushan+Script|Montserrat:400,600,700"
      rel="stylesheet"
    />
  </body>
</html>
